<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg
      width="400"
      height="300"
      style="border: solid #000"
      viewBox="0 0 200 100"
    >
      <rect
        x="1"
        y="1"
        width="198"
        height="98"
        style="fill: #ccc; fill-opacity: 0.8; stroke: #00f; stroke-width: 2px"
      />
      <circle cx="50" cy="50" r="50" style="fill: #fac" />
    </svg>
    <hr />
    <svg
      width="600"
      height="300"
      style="border: solid #000"
      viewBox="0 0 200 100"
      preserveAspectRatio="xMinYMin slice "
      
    
    >
      <rect
        x="1"
        y="1"
        width="198"
        height="98"
        style="fill: #ccc; fill-opacity: 0.8; stroke: #00f; stroke-width: 2px"
      />
      <circle cx="100" cy="100" r="100" style="fill: #fac; fill-opacity: 0.8" />
    </svg>
    <hr />
    <div style="margin-left:100px;">
        <svg
        width="400"
        height="300"
        style="border: solid #000"
        viewBox="0 0 200 100"
        preserveAspectRatio="xMinYMin slice "
        
        >
        <rect
            x="1"
            y="1"
            width="198"
            height="98"
            style="fill: #ccc; fill-opacity: 0.8; stroke: #00f; stroke-width: 2px"
        />
        <circle cx="100" cy="100" r="100" style="fill: #fac; fill-opacity: 0.8" />
        </svg>
    </div>
    <hr />
    <svg
      width="400"
      height="300"
      style="border: solid #000"
      viewBox="0 0 200 100"
      preserveAspectRatio="none"
    >
      <rect
        x="1"
        y="1"
        width="198"
        height="98"
        style="fill: #ccc; fill-opacity: 0.8; stroke: #00f; stroke-width: 2px"
      />
      <circle cx="100" cy="100" r="100" style="fill: #fac; fill-opacity: 0.8" />
    </svg>
    
  </body>
</html>
